<template>
	<view class="content">
		<mine-head title="勋章" backIconColor="#fff" :background="background" titleColor="#fff" :borderBottom="false"></mine-head>
		<view class="">
			<!-- <view class="title">
				音乐
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in music" :key="index">
					<view class="img">
						<image :src="host + item.img" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="info">
						{{item.userCountData}}/{{item.countData}}
					</view>
				</view>
				
			</view> -->
		</view>
		<view class="">
			<view class="title" v-if="mindfulness.length>0">
				正念
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in mindfulness" :key="index">
					<view class="img" :class="{active:item.isActive}">
						<image :src="host + item.img" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="info">
						{{item.userCountData}}/{{item.countData}}
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="title" v-if="meditation.length>0">
				冥想
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in meditation" :key="index">
					<view class="img" :class="{active:item.isActive}">
						<image :src="host + item.img" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="info">
						{{item.userCountData}}/{{item.countData}}
					</view>
				</view>
				
			</view>
		</view>
		<view class="">
			<view class="title" v-if="breathing.length>0">
				呼吸
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in breathing" :key="index">
					<view class="img" :class="{active:item.isActive}">
						<image :src="host + item.img" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="info">
						{{item.userCountData}}/{{item.countData}}
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				background:{
					backgroundColor: 'transparent'
				},
				meditation:[],//冥想
				mindfulness:[],//正念
				breathing:[],//呼吸
				music:[],//音乐
				host:null
			};
		},
		onLoad() {
			this.host = config.host1
		},
		onShow() {
			this.getUserMedal()
		},
		methods:{
			getUserMedal(){
				let that = this
				uni.$_get({
					url: "getUserMedal",
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							if(data.meditation){
								data.meditation.map(item =>{
									item.isActive = false
									if(item.userCountData >= item.countData){
										item.isActive = true
									}
								})
								that.meditation=data.meditation//冥想
							}
							if(data.mindfulness){
								data.mindfulness.map(item =>{
									item.isActive = false
									if(item.userCountData >= item.countData){
										item.isActive = true
									}
								})
								that.mindfulness=data.mindfulness//冥想
							}
							if(data.breathing){
								data.breathing.map(item =>{
									item.isActive = false
									if(item.userCountData >= item.countData){
										item.isActive = true
									}
								})
								that.breathing=data.breathing//冥想
							}
							that.music=data.music//音乐
							// data.map((item,index) =>{
							// 	let obj ={
							// 		day:that.getWeek(item.day),
							// 		date:item.date,
							// 		sign:item.sign,
							// 		integral:item.integral
							// 	}
							// 	arr.push(obj)
							// })
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
page{
	background: #151515 !important;
}
.content{
	background: #151515 !important;
	min-height: 100vh;
}
/deep/.u-back-wrap{
	background: url(@/static/img/common/topBack2.png) no-repeat center / 40rpx 40rpx;
}
.title{
	padding: 30rpx;
	font-size: 28rpx;
	color: #ccc;
}
.list{
	padding: 30rpx;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 30rpx;
	.item{
		text-align: center;
		margin-bottom: 30rpx;
		.img{
			margin: 0 auto 20rpx;
			image{
				width: 175rpx;
				height: 201rpx;
				filter: grayscale(100%);
			}
			
		}
		.active{
			image{
				filter: grayscale(0);
			}
		}
		.name{
			height: 36rpx;
			line-height: 36rpx;
			font-size: 24rpx;
			color: #fefeff;
			font-family: $uni-font-family-Bold;
		}
		.info{
			height: 30rpx;
			line-height: 30rpx;
			font-size: 22rpx;
			color: #999;
		}
	}
}
</style>
